<template>
  <div>
    <el-card class="oneCard" @click.native="jump">
      <div :class="[clazz]">
        <div>
          <el-link :type="type" :underline="false">{{ total }} （{{ unit }}）</el-link>
          <h1>{{ title }}</h1>
        </div>
        <div><svg-icon :icon-class="icon" /></div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'OneCard',
  props: {
    title: {
      required: false,
      type: String,
      default: '--'
    },
    total: {
      required: false,
      type: Number,
      default: 0
    },
    unit: {
      required: false,
      type: String,
      default: '个'
    },
    icon: {
      required: false,
      type: String,
      default: 'fixed'
    },
    clazz: {
      required: false,
      type: String,
      default: 'purple'
    }
  },
  data() {
    return {
      type: 'warning'
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  methods: {
    jump() {
    }
  }
}
</script>

<style lang="scss" scoped>
  .oneCard {
    .purple {
      a {
        color: #5C5FF8!important;
      }
      h1 {
        color: #5C5FF8!important;
      }
    }
    .green {
      a {
        color: #03C145!important;
      }
      h1 {
        color: #03C145!important;
      }
    }
    .orange {
      a {
        color: #FFB511!important;
      }
      h1 {
        color: #FFB511!important;
      }
    }
    .darkgreen {
      a {
        color: #689835!important;
      }
      h1 {
        color: #689835!important;
      }
    }
  }
</style>
